<template>
  <div class="customer-list">
    <span style="font-size: 30px;position: relative; top: -10px ;">供应商列表</span>
    <!-- 这里放置表格等内容 -->
      <div class="add-button-bottom">
      <el-button class="add-button" @click="showAddModal">新增供应商</el-button>
      </div>
    <!-- 下划线分隔 -->
    <el-divider></el-divider>
        <el-table :data="vemdor" style="width: 100%" class="centered-table"> 
        <el-table-column prop="w_code" label="编号" width="auto"></el-table-column>
        <el-table-column prop="vendor_name" label="供应商公司名称" width="auto"></el-table-column>
        <el-table-column prop="vendor_head" label="负责人" width="auto"></el-table-column>
        <el-table-column prop="vendor_phone" label="负责人手机" width="auto"></el-table-column>
        <el-table-column prop="vendor_address" label="公司地址" width="auto"></el-table-column>
        <el-table-column prop="vendor_remark" label="备注" width="auto"></el-table-column>
        <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete"  @click="handleDelete(scope.row.vendor_id)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    <el-divider></el-divider> <!-- 下划线分隔 -->
    <!-- 分页 -->
    <el-pagination class="pagination"
            @size-change="change"
            @current-change="Ymchange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" 
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="rows">
    </el-pagination>

    <el-dialog title="添加" :visible.sync="isAddModalVisible" width="400px" :close-on-click-modal="false" class="qw">
   <!-- 在这里放置模态框内容 -->
  <el-form :model="form" label-width="100px" class="ee">
     <el-form-item label="编号" v-if="yincang">
      <el-input v-model="form.w_code" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="供应商名称*" >
      <el-input v-model="form.vendor_name" autocomplete="off" placeholder="请输入供应商公司名称"   maxlength="20"  show-word-limit></el-input>
    </el-form-item>
    <el-form-item label="负责人姓名*">
      <el-input v-model="form.vendor_head" autocomplete="off" placeholder="请输入负责人姓名"   maxlength="10"  show-word-limit></el-input>
    </el-form-item>
    <el-form-item label="负责人手机*">
      <el-input v-model="form.vendor_phone" autocomplete="off" placeholder="请输入负责人手机"  maxlength="11"  show-word-limit></el-input>
    </el-form-item>
    <el-form-item label="公司地址">
      <el-input v-model="form.vendor_address" autocomplete="off" placeholder="请输入公司地址"  maxlength="30"  show-word-limit></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input type="textarea" v-model="form.vendor_remark" autocomplete="off" placeholder="请输入备注"  maxlength="60"  show-word-limit></el-input>
    </el-form-item>
  </el-form>
<div>
<span slot="footer" style="display: flex; justify-content: center;">
  <el-button @click="isAddModalVisible = false" style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;" >取消</el-button>
  <el-button type="primary" @click="submitForm" style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">确定</el-button>
</span>
</div>
</el-dialog>


 <!-- 修改模态框 -->
   <el-dialog title="修改" :visible.sync="isEditModalVisible" width="400px" :close-on-click-modal="false" class="qw">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="供应商列表Id" v-if="yincang">
          <el-input v-model="editForm.vendor_id" autocomplete="off" placeholder="序号" disabled ></el-input>
        </el-form-item>
           <el-form-item label="供应商编号" v-if="yincang">
          <el-input v-model="editForm.w_code" autocomplete="off" placeholder="客户编号" disabled ></el-input>
        </el-form-item>
         <el-form-item label="供应商名称*">
        <el-input v-model="editForm.vendor_name" autocomplete="off" placeholder="请输入供应商公司名称" maxlength="20"  show-word-limit>></el-input>
        </el-form-item>
       <el-form-item label="负责人姓名*">
      <el-input v-model="editForm.vendor_head" autocomplete="off" placeholder="请输入负责人姓名" maxlength="10"  show-word-limit>></el-input>
      </el-form-item>
     <el-form-item label="负责人手机*">
      <el-input v-model="editForm.vendor_phone" autocomplete="off" placeholder="请输入负责人手机" maxlength="11"  show-word-limit>></el-input>
     </el-form-item>
     <el-form-item label="公司地址">
      <el-input v-model="editForm.vendor_address" autocomplete="off" placeholder="请输入公司地址" maxlength="30"  show-word-limit>></el-input>
     </el-form-item>
     <el-form-item label="备注">
      <el-input type="textarea" v-model="editForm.vendor_remark" autocomplete="off" placeholder="请输入备注" maxlength="60"  show-word-limit>></el-input>
     </el-form-item>
  </el-form>
      <div>
        <span slot="footer" style="display: flex; justify-content: center;">
          <el-button @click="isEditModalVisible = false"
            style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
          <el-button type="primary" @click="updateWarehouse"
            style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">修改</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
  
</template>

<script>
import axios from 'axios';
import { MessageBox } from 'element-ui';
import $http from '@/routers/base';
export default {
  data() {
    return {
      yincang:false,
      currentPage: 1, //当前页
      pageSize: 3, //每页显示数
      rows: 0, //总行数
      vemdor: [], // 客户列表数据

      isAddModalVisible: false, // 控制新增客户弹窗的显示状态
      isEditModalVisible:false,
      form: {
         w_code:'',
         vendor_name: '', // 在这里初始化所需的表单字段
         vendor_head:'',
         vendor_phone:'',
         vendor_address:'',
         vendor_remark:'',
         },
        editForm: {
           vendor_id:'', 
           w_code:'',
           vendor_name: '',
           vendor_head: '',
           vendor_phone: '',
           vendor_address: '',
           vendor_remark: ''
         },  
    };
    
  },
  methods: {
    //查询供应商
     async fetchData() {
      const response = await $http.get('bs_vendor/Index');
      this.vemdor = response
    },
     //分页
    fetchData() {
          this.where="1=1";
      // 向后端请求数据，并更新客户数据和总条数
       $http.get('bs_vendor/getFenYe', {
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          where:this.where
       }
     }).then(res => {
            this.vemdor =res.vemdor;
            this.rows=res.rows;
     }).catch(error => {
        console.error('Error fetching client data: ', error);
     });
    },
     change: function(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.fetchData();
    },
    Ymchange: function(page) {
      this.currentPage = page;
      this.fetchData();
    },
    //添加
    async submitForm(){
     if(this.validateForm()){
      $http.post('bs_vendor/AddWarehouse',{
               w_code:this.form.w_code,
              vendor_name:this.form.vendor_name,
              vendor_head:this.form.vendor_head,
              vendor_phone:this.form.vendor_phone,
              vendor_address:this.form.vendor_address,
              vendor_remark:this.form.vendor_remark
      })
      .then(response=>{
        if(response){
          this.$message.success('添加成功！');
          this.fetchData();
          this.isAddModalVisible = false;
        }else{
          this.$message.error('添加失败！ 请重新添加！');
        }
      }).catch(error=>{
        this.$message.error('添加失败：'+error.message);
      })
     }
    },
    // 显示新增客户弹窗
    showAddModal() {
      this.isAddModalVisible = true;
    },
      //添加非空判断
    validateForm() {
      if (!this.form.vendor_name || this.form.vendor_name.length < 1|| this.form.vendor_name.length > 50) {
      this.$message.error('供应商名称长度应在0到20个字符之间');
       return false;
  }
  if (!this.form.vendor_phone || this.form.vendor_phone.length !== 11) {
    this.$message.error('电话号码长度应为11位');
    return false;
  }
  if (!this.form.vendor_head || this.form.vendor_head.length < 2 || this.form.vendor_head.length > 10) {
    this.$message.error('负责人长度应在2到10个字符之间');
    return false;
  }
  if (!this.form.vendor_address) {
    this.$message.error('公司地址不能为空');
    return false;
  }
  if (!this.form.vendor_remark) {
    this.$message.error('备注不能为空');
    return false;
  }
  if (/\d/.test(this.form.vendor_head)) {
    this.$message.error('负责人姓名不能包含数字');
    return false;
  }
  if (/^\d+$/.test(this.form.vendor_name)) {
    this.$message.error('供应商名称不能包含数字');
    return false;
  }
  return true; // 表单验证通过
    },
     // 显示编辑供应商模态框
    showEditModal() {
      this.isEditModalVisible = true;
    },
    // 关闭模态框
    handleCloseModal() {
      this.isAddModalVisible = false;
      this.isEditModalVisible = false;
    },
     //修改显示
    handleEdit(row) {
      this.$set(this.editForm, 'vendor_id', row.vendor_id); this.$set(this.editForm, 'w_code', row.w_code);this.$set(this.editForm, 'vendor_name', row.vendor_name);
      this.$set(this.editForm, 'vendor_head', row.vendor_head); this.$set(this.editForm, 'vendor_phone', row.vendor_phone);
      this.$set(this.editForm, 'vendor_address', row.vendor_address); this.$set(this.editForm, 'vendor_remark', row.vendor_remark);
      this.isEditModalVisible = true;
    },
     //客户修改
    async updateWarehouse() {
      console.log(1);
      if (this.validateEditForm()) {
        $http.put('bs_vendor/updateClient',{
           vendor_id: this.editForm.vendor_id,
           w_code:this.editForm.w_code,
           vendor_name: this.editForm.vendor_name,
           vendor_head: this.editForm.vendor_head,
           vendor_phone: this.editForm.vendor_phone,
           vendor_address: this.editForm.vendor_address,
           vendor_remark: this.editForm.vendor_remark
        })
          .then(response => {
            if (response) {
              this.$message.success('修改成功！');
                this.fetchData();
                this.isEditModalVisible = false;
            } else {
              this.$message.error('修改失败！请重试！');
            }
          }).catch(error => {
            this.$message.error('修改失败：' + error.message);
          })
      }
    },
      //修改非空判断
    async validateEditForm() {
      return this.editForm.vendor_name.trim() !== '' &&
        this.editForm.vendor_head.trim() !== '' &&
        this.editForm.vendor_phone.trim()!== '' &&
        this.editForm.vendor_address.trim()!== '' &&
         this.editForm.vendor_remark.trim()!== '' ;
    },
    // 删除客户的逻辑
     async handleDelete(vendor_id) {
      MessageBox.confirm('确认删除删除该条记录吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'bs_vendor',
      }).then(() => {
        $http.delete(`bs_vendor/DeleteWarehouse/${vendor_id}`)
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.fetchData();
          }).catch(error=>{
            this.$message.error('删除失败：'+error.message)
          })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '管理员取消了删除,删除无效哦！'
          })
        })
    },
   
  },
    mounted() {
    this.fetchData();
  },
};
</script>

<style>
/*表格单元格中的文本内容都将水平居中显示*/
.centered-table .el-table__cell {
    text-align: center;
}
/*表格标题背景变色*/
.centered-table .el-table__header th {
  background-color: #eeeeee;; /* 设置标题行的背景色 */
  color: #333; /* 设置标题行的文字颜色 */
}

.customer-list {
  background-color: #ffffff;
  padding: 20px;
}

/*按钮的样式*/
.add-button {
  background-color: #4FC1B0;
  color: #ffffff;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}
.add-button-bottom
{
   position: fixed; /* 或者使用 absolute/relative，根据你的布局需求 */  
    right: 0px; /* 确保按钮在右侧 */  
    top: 130px;
   
}

.pagination-info {
  margin-bottom: 10px;
  text-align: right; /* 将当前显示条数等信息向右对齐 */
}
/* 调整对话框样式 */
.el-dialog__body {  
  padding: 0px 10px 20px 10px; /* 调整内边距 */
}
/* 模态框 */
.qw{
   position: fixed;
  top: 14%;
  left: 10%;
  height: 600px; 
  overflow: hidden;
}
.ee{
    border-color: #4FC1B0;
}
</style>